<template>
    <div id="studyJobIn">
        <div class="container">
            <div class="studyJobIn">
                <h3>任务一：准备好项目的开发环境</h3>
                <div class="studyTypes">
                    <div :class="[isChooseOne ? 'studyTypeActive' : 'studyType']" @click="goRequire">任务要求</div>
                    <div :class="[isChooseTwo ? 'studyTypeActive' : 'studyType']" @click="goRealize">任务实现</div>
                    <div :class="[isChooseThree ? 'studyTypeActive' : 'studyType']" @click="goCommit">任务提交</div>
                    <div :class="[isChooseFour ? 'studyTypeActive' : 'studyType']" @click="goReport">任务报告</div>
                </div>
                <div style="width: 100%">
                    <div id="studyRequire" v-if="isChooseOne">
                        <div class="title">
                            <h4>任务要求</h4>
                        </div>
                        <div class="titleContent">
                            1.
                            安装好本项目开发需要的环境，包括python解释器和eclipse的python开发环境，安装完成后提交开发环境的运行截图，并总结安装步骤，请将截图和总结文档在任务提交区进行提交。<br>
                            2. 完成任务中关于开发环境的在线测评练习，练习后对错误的题目查看解析，加强自己对编程环境和开发环境的理解。
                        </div>
                        <div class="title">
                            <h4>任务说明视频</h4>
                        </div>
                        <div class="titleContent">
                            <video src="" controls style="width: 281px;height: 144px;"></video>
                        </div>
                        <div class="title">
                            <h4>任务完成参考图片</h4>
                        </div>
                        <div class="titleContent">
                            <div style="width: 272px;height: 156px;border-radius: 16px;overflow: hidden;">
                                <el-image :src="require('@/assets/img/study/图1.png')" style="height: 100%;"></el-image>
                            </div>
                            <div style="width: 272px;height: 156px;border-radius: 16px;overflow: hidden;">
                                <el-image :src="require('@/assets/img/study/图2.png')" style="height: 100%;"></el-image>
                            </div>
                            <div style="width: 272px;height: 156px;border-radius: 16px;overflow: hidden;">
                                <el-image :src="require('@/assets/img/study/图3.png')" style="height: 100%;"></el-image>
                            </div>
                        </div>
                    </div>

                    <div id="studyRealize" v-if="isChooseTwo">
                        <div class="title">
                            <h4>任务实现流程步骤</h4>
                        </div>
                        <div class="titleContent">
                            <div style="width: 100%;">step1：熟悉和安装项目使用的解释器环境</div>
                            <div>任务视频：<i class="el-icon-video-play"></i>项目开发环境说明</div>
                        </div>
                        <div class="title">
                            <h4>知识点</h4>
                        </div>
                        <div class="titleContent">
                            <div style="width: 100%;">1、python解释器及安装</div>
                            <div style="width: 100%;">2、python解释器及安装</div>
                            <div style="width: 100%;">3、python解释器及安装</div>
                        </div>
                        <div class="title">
                            <h4>任务素材下载</h4>
                        </div>
                        <div class="titleContent">
                            <div
                                style="width: 440px;height: 247px;background-color: #F9F9F9;border-radius: 8px;padding: 2rem;">
                                <div style="margin-bottom: 1rem;">
                                    <i class="el-icon-paperclip"></i>
                                    <span>任务素材名称</span>
                                    <el-button type="text" style="float: right;" icon="el-icon-download"></el-button>
                                </div>
                                <div style="margin-bottom: 1rem;">
                                    <i class="el-icon-paperclip"></i>
                                    <span>任务素材名称</span>
                                    <el-button type="text" style="float: right;" icon="el-icon-download"></el-button>
                                </div>
                                <div style="margin-bottom: 1rem;">
                                    <i class="el-icon-paperclip"></i>
                                    <span>任务素材名称</span>
                                    <el-button type="text" style="float: right;" icon="el-icon-download"></el-button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="studyRealize" v-if="isChooseThree">
                        <div class="title">
                            <h4>任务上传</h4>
                        </div>
                        <div class="titleContent">
                            <div class="card"
                                style="cursor: pointer; width: 80px;height: 80px;text-align: center;line-height: 80px;">
                                <i class="el-icon-upload2" style="font-size: 25px;"></i>
                            </div>
                        </div>
                        <div class="title">
                            <h4>填写任务心得和小结</h4>
                        </div>
                        <div class="titleContent">
                            <div class="card" style="width: 100%;height: 170px;">
                                <textarea
                                    style="background-color: #F9F9F9;;color: #7A7A7A;width: 100%;height: 100%;border: none;outline: none;"></textarea>
                            </div>
                        </div>
                        <div class="title">
                            <h4>练习遇到的问题</h4>
                        </div>
                        <div class="titleContent">
                            <div class="card" style="width: 100%;height: 170px;;">
                                <textarea
                                    style="background-color: #F9F9F9;;color: #7A7A7A;width: 100%;height: 100%;border: none;outline: none;"></textarea>
                            </div>
                        </div>
                        <div style="width: 100%;display: flex;justify-content: center;margin-top: 2rem;">
                            <el-button type="primary">提交</el-button>
                        </div>
                    </div>

                    <div id="studyRealize" v-if="isChooseFour">
                        <div class="title">
                            <h4>任务评价报告</h4>
                        </div>
                        <div class="titleContent" style="justify-content: start;">
                            <div style="color: #7A7A7A;margin-right: 2rem;">任务提交时间：2021-05-06</div>
                            <div style="color: #7A7A7A;margin-right: 2rem;">任务提交次数：1</div>
                            <div style="color: #7A7A7A;">项目周期：5/25</div>
                            <div style="width: 100%;display: flex;">
                                <div style="margin-right: 3rem;display: flex;align-items: center;font-weight: 600;">
                                    任务综合评分：
                                    <el-rate v-model="value" disabled show-score text-color="#ff9900"
                                        score-template="{value}">
                                    </el-rate>
                                </div>
                                <div style="margin-right: 3rem;display: flex;align-items: center;font-weight: 600;">
                                    项目任务进度：
                                    <el-rate v-model="value" disabled show-score text-color="#ff9900"
                                        score-template="{value}">
                                    </el-rate>
                                </div>
                                <div style="margin-right: 3rem;display: flex;align-items: center;font-weight: 600;">
                                    任务作品质量：
                                    <el-rate v-model="value" disabled show-score text-color="#ff9900"
                                        score-template="{value}">
                                    </el-rate>
                                </div>
                            </div>
                            <div style="margin-top: 2rem; width: 90%;display: flex;justify-content: space-between;">
                                <div style="width: 45%;">
                                    <div style="font-weight: 600;">任务评价：</div>
                                    <div class="card" style="width: 100%;height: 170px;color: #7A7A7A;">
                                        python解释器及安装，用eclipse构建python开发环境python解释器及安装；用eclipse构建python开发环境。python解释器及安装，用eclipse构建python开发环境python解释器及安装；用eclipse构建python开发环境。python解释器及安装，用eclipse构建python开发环境python解释器及安装；用eclipse构
                                    </div>
                                </div>
                                <div style="width: 45%;">
                                    <div style="font-weight: 600;">代码点评：</div>
                                    <div class="card" style="width: 100%;height: 170px;color: #7A7A7A;">
                                       用eclipse构建python开发环境。python解释器及安装，用eclipse构建python开发环境python解释器及安装；用eclipse构建python开发环境。python解释器及安装，用eclipse构建python开发环境python解释器及安装；用eclipse构
                                    </div>
                                </div>

                            </div>



                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value: 4.8,
                isChooseOne: true,
                isChooseTwo: false,
                isChooseThree: false,
                isChooseFour: false
            }
        },
        methods: {
            goRequire() {
                this.isChooseOne = true
                this.isChooseTwo = false
                this.isChooseThree = false
                this.isChooseFour = false
            },
            // 实现
            goRealize() {
                this.isChooseOne = false
                this.isChooseTwo = true
                this.isChooseThree = false
                this.isChooseFour = false
            },
            // 提交
            goCommit() {
                this.isChooseOne = false
                this.isChooseTwo = false
                this.isChooseThree = true
                this.isChooseFour = false
            },
            // 报告
            goReport() {
                this.isChooseOne = false
                this.isChooseTwo = false
                this.isChooseThree = false
                this.isChooseFour = true
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/css/study/studyJobIn.scss';
</style>
